<template>
  <a-upload-dragger class="upload-dragger" name="file" :multiple="true" :action="url" :headers="headers"
    :file-list="fileList" :beforeUpload="handlerBeforeUpload" @change="handleChange">
    <a-button class="dg-base-btn">{{ btnText }}</a-button>
    <p class="ant-upload-hint" v-if="isShowText">
      {{ text }}
    </p>
  </a-upload-dragger>
</template>

<script>
const baseUrl = process.env.VUE_APP_BASE_URL
import { getStorage } from '@/utils/index'
export default {
  props: {
    instance: Object,
    uploadArray: {
      type: Array,
      default: () => []
    },
    btnText: {
      type: String,
      default: '点击选择文件'
    },
    isShowText: {
      type: Boolean,
      default: true
    },
    multipleNumber: {
      type: Number,
      default: 5
    }
  },
  data () {
    return {
      headers: {}, // 请求头
      uploadTypeMap: ['docx', 'xlsx', 'pdf', 'zip', 'rar', 'xls'], // 限制条件
      url: baseUrl + '/system/file/pop',
      fileList: [], // 上传结果
      text: ''
    }
  },
  watch: {
    instance: {
      handler (nVal) {
        const defaultV = nVal.defaultValue
        if (defaultV && this.fileList.length === 0) {
          this.fileList = defaultV.reduce((pre, cur, index) => {
            const { fileName, filePath, id } = cur
            if (!fileName) return
            pre.push({
              name: fileName,
              uid: index,
              id,
              url: filePath
            })
            return pre
          }, [])
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    const token = `${getStorage('token', 0)}`
    this.headers = {
      Authorization: token
    }
    if (this.uploadArray.length > 0) {
      this.uploadTypeMap = this.uploadArray
      this.text = '只能上传.pdf格式文件不超过2M'
    } else {
      this.text =
        '支持.docx/.xlsx/.pdf f.zip/ .rar格式文件不超过2M，多个文件请打成压缩包'
    }
  },
  methods: {
    handlerBeforeUpload (file) {
      const { size, name } = file
      const type = name.split('.').slice(-1)
      let isOkType = false
      if (this.fileList.length >= this.multipleNumber) {
        this.$apiStatusHandler(99, '附件上传不能超过1个')
        return Promise.reject()
      }
      if (size > 16777216) {
        this.$apiStatusHandler(99, '上传的附件超过2m')
        return Promise.reject()
      }
      for (let i = 0; i < this.uploadTypeMap.length; i++) {
        const item = this.uploadTypeMap[i]
        if (type.indexOf(item) !== -1) {
          isOkType = true
          return
        }
      }
      if (!isOkType) {
        this.$apiStatusHandler(99, '上传的附件类型不符合要求')
        return Promise.reject()
      }
    },
    // preView(file) {
    //   let href = ''
    //   let name = ''
    //   var a = document.createElement("a")
    //   if(file.url) {
    //     href = file.url
    //     name = file.name
    //   } else {
    //     const {response} = file
    //     const {data} = response
    //     href = data[0].filePath
    //     name = data[0].fileName
    //   }
    //   a.href = href
    //   a.download = name
    //   a.style.display = "none"
    //   document.body.appendChild(a)
    //   a.click()
    //   a.remove()
    // },
    handleChange (info) {
      let { fileList,file } = info
      if (file && file.response && file.response.code === 401) {
        this.$message.warning('请先登录,再操作!')
        return
      }
      this.fileList = fileList
      
      this.$emit('change', fileList)

    },
    clearFile() {
      this.fileList = []
    }
  }
}
</script>
